import { useEffect, useRef, useState, FC } from "react"
import { EChartsProps } from "type"

const Map: FC<EChartsProps> = ({ width, height }) => {
  const BMapGLRef = useRef<any>(null)
  const [mapC, setMapC] = useState(null)
  useEffect(() => {
    // @ts-ignore
    BMapGLRef.current = window.BMapGL
  }, [])

  useEffect(() => {
    var map = new BMapGLRef.current.Map("container")
    setMapC(map)
    init(map)
  }, [BMapGLRef])

  const init = (map: any) => {
    // 创建地图实例
    var point = new BMapGLRef.current.Point(113.075877,28.254257)
    // // 创建点坐标
    map.centerAndZoom(point, 15)
    drawPoint(map)
  }
  //自定义点位
  const drawPoint = (m: any) => {
    const opt = {
      position: new BMapGLRef.current.Point(113.075877,28.254257),
      offet: new BMapGLRef.current.Size(30, -30)
    }
    let labal = new BMapGLRef.current.Label(`<div class="cacle">自定义</div>`, opt)
    labal.setStyle(
      {
        background: 'none',
        border: 'none'
      }
    )
    m.addOverlay(labal)
    m.addEventListener('click', (e: any) => {
      console.log(e)
    })
  }

  return (
    <div>
      百度地图
      <div id="container" style={{ width: width, height: height }}></div>
    </div>
  )
}

export default Map